fix(explainer): keep mobile toolbar and Style/Export menus in view - #1076

reviews:
  auto_review:
    drafts: true

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

_{Comment @coderabbitai help to get the list of available commands.}

Thanks @BlueboxC for turning the shared #1068 evidence into this focused P0 fix and keeping the existing ownership split. I reviewed the 12af763 CSS change: it is limited to <=760px toolbar wrapping and menu anchoring, with desktop rules and print hiding preserved. I did not find a blocking regression in that CSS scope. The new toolbar browser case actually passed in CI 40092367553; the remaining full-regression failure is the centrally tracked README showcase drift, not a newly observed toolbar failure.

Two small test-evidence clarifications, without asking you to repeat the published matrix: the Escape helper focuses the toggle before sending Escape, while the handler is on the panel, and there is no closing/focus-return assertion afterward. Please either make that focused assertion exercise the panel correctly or avoid claiming Escape coverage. Also, assigning dataset.style covers the style CSS but does not switch the selected button label, so it does not by itself prove every real selected-label width fits.

Please personally review the narrow-screen wrapping and the intentional menu position below the whole toolbar, then complete the author-review checkbox only once that review is actually done. Keep the PR draft pending that confirmation and the remaining acceptance/merge decision. This comment is not a merge approval; no broad additional capture campaign is requested.

Addressed the two test-evidence gaps in 3ff1f02.

The existing matrix now chooses each style through its real menu item and verifies its selected label before measuring containment. Escape is sent from the item focused by opening the menu; the test checks hidden state, aria-expanded=false, and focus returned to the toggle. The shared helper preserves its existing Tab/Shift+Tab/Space support.

Adding the closure assertion to the old test reproduced the problem: the menu stayed open because the helper had moved focus to the toggle. The corrected 24 locale/style/viewport combinations pass, and the full nine-case Explainer Chrome suite passes on official Node22.23.2. No new screenshots or expanded capture campaign, and no runtime/CSS/package change in this follow-up.

The PR remains draft with the personal author-review checkbox unchecked. Your requested human review and upstream acceptance are still separate. The previously disclosed README showcase drift has not been hidden.

BlueboxC

Thanks for the focused follow-up at 3ff1f02. I verified that the test now selects styles through the real menu and checks the selected label, and sends Escape with a menu item focused before asserting hidden state, aria-expanded=false and focus returning to the toggle. Both earlier test-evidence findings are closed.

I also checked this head's CI 40095300022: the narrow-viewport toolbar case actually passes, with browser shards 135 + 170 passing and no skips. The remaining full-regression failure is the separate shared README showcase drift; I found no new toolbar failure. No broader matrix or runtime changes are requested. Thank you for keeping the draft and personal-review confirmation accurate; those remaining acceptance steps and merge approval are still separate.